<template>
  <el-card shadow="never">
    <div slot="header">
      <el-button @click="$router.push({ name: 'evaluatePlan' })">返回</el-button>
    </div>
    <el-steps
      finish-status="success"
      style="display:flex; justify-content: center;"
      :space="200"
      class="mb20"
      align-center
      :active="active"
    >
      <el-step title="基本信息"></el-step>
      <el-step title="考评内容"></el-step>
      <el-step title="执行者"></el-step>
      <el-step title="考评对象" v-if="evalMode !== 4"></el-step>
      <el-step title="完成"></el-step>
    </el-steps>
    <el-card :style="active === 0 ? cardStyle  : ''" shadow="never" style="overflow: inherit">
      <div slot="header" class="clearfix" style="text-align: center">
        <span>{{ computedWord(active) }}</span>
      </div>
      <plan-form
        @evalMode="handleEvalMode"
        @targetMode="handleTargetMode"
        @listData="handleListData"
        @postData="handlePostData"
        @notSubmit="handleNotSubmit"
        v-show="active === 0"
        ref="planForm"
      />
      <second-transfer
        @notSubmit="handleNotSubmit"
        @postData="handlePostData"
        @postArrData="handlePostArrData"
        v-show="active === 1"
        ref="secondTransfer"
      />
      <third-transfer
        @notSubmit="handleNotSubmit"
        @postData="handlePostData"
        @postDept="handlePostDept"
        v-show="active === 2"
        ref="thirdTransfer"
      />
      <fourth-transfer
        @notSubmit="handleNotSubmit"
        @postData="handlePostData"
        v-show="active === 3"
        ref="fourthTransfer"
      />
      <five-comp v-show="active === 5" ref="fiveComp" />
    </el-card>
    <div class="mt20" style="overflow: hidden">
      <el-button class="fl" type="primary" v-show="active > 0 && active < 4" @click="handlePre">上一步</el-button>
      <el-button
        class="fr"
        type="primary"
        v-show=" evalMode !== 4 && active < 3 || evalMode === 4 && active < 2"
        @click="handleNext"
      >下一步</el-button>
      <el-button
        class="fr"
        type="primary"
        v-show="(evalMode !== 4 && active === 3) || (evalMode === 4 && active === 2)"
        @click="handleSubmit"
      >提交</el-button>
    </div>
  </el-card>
</template>

<script>
import PlanForm from './Form'
import SecondTransfer from './SecondTransfer'
import ThirdTransfer from './ThirdTransfer'
import FourthTransfer from './FourthTransfer'
import FiveComp from './FiveComp'
import { planCreate, getDetail, planUpdateAll } from '@/api/eval'
import { getSession, setSession, removeSession } from '@/utils/util'

export default {
  components: {
    PlanForm,
    SecondTransfer,
    ThirdTransfer,
    FourthTransfer,
    FiveComp
  },
  data() {
    return {
      param: {
        evalPlan: {},
        evalPlanItemList: {},
        evalPlanExecutorList: {},
        evalPlanTargetList: {}
      },
      cardStyle: {
        width: '800px',
        margin: '0 auto'
      },
      secondArrData: [],
      active: 0,
      first: true,
      second: true,
      third: true,
      fourth: true,
      row: this.$route.params.row || getSession('evaluateCreateRow'),
      type: this.$route.params.type,
      thirdDeptArr: [],
      evalMode: null
    }
  },
  async mounted() {
    console.log('evaluateCreateRow', this.row)
    if (this.row) {
      const res = await getDetail(this.row.evalPlanId, {})
      console.log('getDetail res', res)
      if (res.state === '000000') {
        this.$refs.secondTransfer.parSetArr(res.data.evalPlanItemList)
        this.$refs.thirdTransfer.setArr(res.data.evalPlanExecutorList)
        if (this.evalMode !== 4) {
          this.$refs.fourthTransfer.setArr(res.data.evalPlanTargetList)
        }
      }
      this.$refs.planForm.setObj(this.row)
    }
  },
  methods: {
    handlePostDept(arr) {
      console.log('postDept', arr)

      if (arr.length > 0) {
        this.thirdDeptArr = [...arr]
      }
    },
    // 第二步到第一步，改变数据时，传递第二步的 toData 数据给 第一步的表单暂存起来
    handlePostArrData(arr) {
      this.$refs.planForm.saveArr(arr)
    },
    // 获取第一个表单选择的考评模块
    handleListData(arr) {
      this.secondArrData = arr
    },
    // 监听考评对象变化
    handleTargetMode(n) {
      this.$nextTick(() => {
        if (this.evalMode !== 4) {
          this.$refs.fourthTransfer.getData(n)
        }
        this.$refs.secondTransfer.getTargetMode(n)
        this.$refs.thirdTransfer.getTargetMode(n)
      })
    },
    handleEvalMode(n) {
      this.evalMode = n
      this.$nextTick(() => {
        this.$refs.thirdTransfer.getEvalMode(n)
        if (this.evalMode !== 4) {
          this.$refs.fourthTransfer.getEvalMode(n)
        }
      })
    },
    // 提交事件处理
    async handleSubmit() {
      if (this.active === 3) {
        if (this.evalMode !== 4) {
          this.$refs.fourthTransfer.postData()
        }
      }
      if (this.first && this.second && this.third && this.fourth) {
        const res = await planCreate(this.param)
        if (res.state === '000000') {
          this.active = 5
        }
      }
    },
    computedWord(num) {
      let str = ''
      switch (num) {
        case 0:
          str = '考评计划基本信息'
          break
        case 1:
          str = '考评内容'
          break
        case 2:
          str = '执行者'
          break
        case 3:
          str = '考评对象'
          break
        default:
          break
      }
      return str
    },
    handlePostData(bool, obj, num) {
      if (num === 1) {
        this.first = bool
        this.$set(this.param, 'evalPlan', obj)
      } else if (num === 2) {
        this.second = bool
        this.$set(this.param, 'evalPlanItemList', obj)
      } else if (num === 3) {
        this.third = bool
        let arr = []
        obj.map((j, i) => {
          arr.push({ executorId: j.executorId || j.key, executorMode: j.executorMode })
          if (this.evalMode === 3) {
            arr[i].executorDeptId = j.executorDeptId
          }
        })
        // arr.map(v => {
        //   // 截取用户id传给后台
        //   v.executorId = v.key
        // })
        this.$set(this.param, 'evalPlanExecutorList', arr)
        console.log('obj', obj)
        if (this.evalMode === 3) {
          // 科室考评时，选择部门要带过去
          this.$refs.fourthTransfer.setArr(this.thirdDeptArr, 'third')
        }

        // if (this.param.evalPlan.evalMode === 1) {
        //   if (this.param.evalPlan.targetMode === 3) {
        //     // 填报时，考评对象为人员时，执行人等于被考评人 则这个获取数据传递给第四步
        //     this.$refs.fourthTransfer.setArr(obj, 'third')
        //   } else if (this.param.evalPlan.targetMode === 1) {
        //     // 为部门时，科室带过去
        //     console.log('postData thirdDeptArr', this.thirdDeptArr)
        //     this.$refs.fourthTransfer.setArr(this.thirdDeptArr, 'third')
        //   }
        // }
      } else {
        this.fourth = bool
        this.$set(this.param, 'evalPlanTargetList', obj)
      }
    },
    handleNotSubmit(num) {
      if (num === 1) {
        this.first = false
      } else if (num === 2) {
        this.second = false
      } else if (num === 3) {
        this.third = false
      } else {
        this.fourth = false
      }
    },
    handlePre() {
      // console.log('active', this.active)
      if (this.active === 1) {
        this.$refs.secondTransfer.getArrData()
      }
      this.active = this.active - 1
      if (this.active <= 0) {
        this.active = 0
      }
    },
    handleNext() {
      if (this.active === 0) {
        this.$refs.planForm.postData()
        this.$refs.secondTransfer.setArr(this.secondArrData)
      }
      if (this.active === 1) {
        this.$refs.secondTransfer.postData()
      }
      if (this.active === 2) {
        this.$refs.thirdTransfer.postData()
      }
      if (this.first && this.second && this.third && this.fourth) {
        this.active += 1
        if (this.active >= 3) {
          this.active = 3
        }
      }
    }
  },
  destroyed() {
    removeSession('evaluateCreateRow')
    // removeSession('evaluateCreateType')
  }
}
</script>